<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#333">
    <title>Material Style</title>
    <meta name="description" content="Material Style Theme">
    <link rel="shortcut icon" href="assets/img/favicon-v=3.png">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="assets/css/preload.min.css">
    <link rel="stylesheet" href="assets/css/plugins.min.css">
    <link rel="stylesheet" href="assets/css/style.light-blue-500.min.css">
    <link rel="stylesheet" href="assets/css/width-boxed.min.css" id="ms-boxed" disabled="">
    <!--[if lt IE 9]>
        <script src="assets/js/html5shiv.min.js"></script>
        <script src="assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <a href="javascript:void(0)" class="ms-conf-btn ms-configurator-btn btn-circle btn-circle-raised btn-circle-primary animated rubberBand">
      <i class="fa fa-gears"></i>
    </a>
    <div id="ms-configurator" class="ms-configurator">
      <div class="ms-configurator-title">
        <h3>
          <i class="fa fa-gear"></i> Theme Configurator</h3>
        <a href="javascript:void(0);" class="ms-conf-btn withripple">
          <i class="zmdi zmdi-close"></i>
        </a>
      </div>
      <div class="panel-group" id="accordion_conf" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="ms-conf-header-color">
            <h4 class="panel-title">
              <a role="button" class="withripple" data-toggle="collapse" data-parent="#accordion_conf" href="#ms-collapse-conf-1" aria-expanded="true" aria-controls="ms-collapse-conf-1">
                <i class="zmdi zmdi-invert-colors"></i> Color Selector </a>
            </h4>
          </div>
          <div id="ms-collapse-conf-1" class="card-collapse collapse show" role="tabpanel" aria-labelledby="ms-conf-header-color">
            <div class="panel-body">
              <div id="color-options" class="ms-colors-container">
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary red" data-color="red">red</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary pink" data-color="pink">pink</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary purple" data-color="purple">purple</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary deep-purple" data-color="deep-purple">deep-purple</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary indigo" data-color="indigo">indigo</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary blue" data-color="blue">blue</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary light-blue active" data-color="light-blue">light-blue</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary cyan" data-color="cyan">cyan</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary teal" data-color="teal">teal</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary green" data-color="green">green</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary light-green" data-color="light-green">light-green</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary lime" data-color="lime">lime</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary yellow" data-color="yellow">yellow</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary amber" data-color="amber">amber</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary orange" data-color="orange">orange</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary deep-orange" data-color="deep-orange">deep-orange</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary brown" data-color="brown">brown</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary grey" data-color="grey">grey</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary blue-grey" data-color="blue-grey">blue-grey</a>
              </div>
              <div id="grad-options" class="ms-color-shine">
                <h4 class="no-mb text-center">Color Brightness</h4>
                <span>300</span>
                <span>400</span>
                <span>500</span>
                <span>600</span>
                <span>700</span>
                <span>800</span>
                <a href="javascript:void(0)" data-shine=300 class="ms-color-box grad c300 light-blue">300</a>
                <a href="javascript:void(0)" data-shine=400 class="ms-color-box grad c400 light-blue">400</a>
                <a href="javascript:void(0)" data-shine=500 class="ms-color-box grad c500 light-blue active">500</a>
                <a href="javascript:void(0)" data-shine=600 class="ms-color-box grad c600 light-blue">600</a>
                <a href="javascript:void(0)" data-shine=700 class="ms-color-box grad c700 light-blue">700</a>
                <a href="javascript:void(0)" data-shine=800 class="ms-color-box grad c800 light-blue">800</a>
              </div>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="ms-conf-header-headers">
            <h4 class="panel-title">
              <a class="collapsed withripple" role="button" data-toggle="collapse" data-parent="#accordion_conf" href="#ms-collapse-conf-2" aria-expanded="false" aria-controls="ms-collapse-conf-2">
                <i class="zmdi zmdi-view-compact"></i> Header Styles </a>
            </h4>
          </div>
          <div id="ms-collapse-conf-2" class="card-collapse collapse" role="tabpanel" aria-labelledby="ms-conf-header-headers">
            <div class="panel-body">
              <!--<h5>Preset Options</h5>
                    <form class="form-inverse ms-conf-radio">
                        <div class="form-group">
                            <div class="radio radio-primary">
                                <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">Default Style
                                </label>
                            </div>
                            <div class="radio radio-primary">
                                <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Pure Material
                                </label>
                            </div>
                            <div class="radio radio-primary">
                                <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">Navbar Mode
                                </label>
                            </div>
                        </div>
                    </form>
                    <h5>Custom Header</h5>-->
              <h6>Header Options</h6>
              <form class="form-inverse ms-conf-radio" id="header-config">
                <div class="form-group">
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customHeader" id="whiteHeader" value="white" checked="cheked"> Light Color </label>
                  </div>
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customHeader" id="primaryHeader" value="primary"> Primary Color </label>
                  </div>
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customHeader" id="darkHeader" value="dark"> Dark Color </label>
                  </div>
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customHeader" id="noHeader" value="hidden"> No Header (Navbar Mode) </label>
                  </div>
                </div>
              </form>
              <h6>Navbar Options</h6>
              <form class="form-inverse ms-conf-radio" id="navbar-config">
                <div class="form-group">
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customNavbar" id="whiteNavbar" value="white" checked=""> Light Color </label>
                  </div>
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customNavbar" id="primaryNavbar" value="primary"> Primary Color </label>
                  </div>
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customNavbar" id="darkNavbar" value="dark"> Dark Color </label>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="ms-conf-header-container">
            <h4 class="panel-title">
              <a class="collapsed withripple" role="button" data-toggle="collapse" data-parent="#accordion_conf" href="#ms-conf-collapse-3" aria-expanded="false" aria-controls="ms-conf-collapse-3">
                <i class="zmdi zmdi-grid"></i> Container Options </a>
            </h4>
          </div>
          <div id="ms-conf-collapse-3" class="card-collapse collapse" role="tabpanel" aria-labelledby="ms-conf-header-container">
            <div class="panel-body">
              <form class="form-inverse ms-conf-radio" id="boxed-config">
                <div class="form-group">
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customWidth" id="fullWidth" value="full" checked=""> Full Width </label>
                  </div>
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customWidth" id="boxedWidth" value="boxed"> Boxed Mode </label>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="ms-preload" class="ms-preload">
      <div id="status">
        <div class="spinner">
          <div class="dot1"></div>
          <div class="dot2"></div>
        </div>
      </div>
    </div>
    <div class="ms-site-container ms-nav-fixed">
      <nav class="navbar navbar-expand-md navbar-fixed ms-lead-navbar navbar-mode navbar-mode mb-0" id="navbar-lead">
        <div class="container container-full">
          <div class="navbar-header">
            <a class="navbar-brand animated fadeInRight animation-delay-5" href="index.html">
              <!-- <img src="assets/img/demo/logo-navbar.png" alt=""> -->
              <span class="ms-logo ms-logo-white ms-logo-sm">M</span>
              <span class="ms-title">Material
                <strong>Style</strong>
              </span>
            </a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
              <li class="nav-item animated fadeIn animation-delay-4">
                <a data-scroll class="nav-link" href="#home">Home</a>
              </li>
              <li class="nav-item animated fadeIn animation-delay-5">
                <a data-scroll class="nav-link" href="#timeline">Timeline</a>
              </li>
              <li class="nav-item animated fadeIn animation-delay-6">
                <a data-scroll class="nav-link" href="#education">Education</a>
              </li>
              <li class="nav-item animated fadeIn animation-delay-7">
                <a data-scroll class="nav-link" href="#skills">Skills</a>
              </li>
              <li class="nav-item animated fadeIn animation-delay-8">
                <a data-scroll class="nav-link" href="#portfolio">Portfolio</a>
              </li>
              <li class="nav-item animated fadeIn animation-delay-9">
                <a data-scroll class="nav-link" href="#testimonials">Testimonials</a>
              </li>
              <li class="nav-item animated fadeIn animation-delay-10">
                <a data-scroll class="nav-link" href="#information">Information</a>
              </li>
            </ul>
          </div>
          <!-- navbar-collapse collapse -->
          <a href="javascript:void(0)" class="ms-toggle-left btn-navbar-menu animated fadeIn animation-delay-12">
            <i class="zmdi zmdi-menu"></i>
          </a>
        </div>
        <!-- container -->
      </nav>
      <div class="intro-full ms-hero-img-keyboard ms-hero-bg-primary color-white" id="home">
        <div class="intro-full-content index-1">
          <div class="container">
            <div class="text-center mb-4">
              <img src="assets/img/demo/avatar1.jpg" alt="..." class="ms-avatar animated rollIn animation-delay-5">
              <h1 class="no-m color-white center-block fw-500 mt-2 animated zoomInRight animation-delay-7">Andrea Smith</h1>
              <h2 class="animated zoomInRight animation-delay-8">Full Stack Developer</h2>
              <a href="javascript:void(0)" class="btn-circle btn-circle-white animated zoomInUp animation-delay-8">
                <i class="zmdi zmdi-facebook"></i>
              </a>
              <a href="javascript:void(0)" class="btn-circle btn-circle-white animated zoomInUp animation-delay-9">
                <i class="zmdi zmdi-twitter"></i>
              </a>
              <a href="javascript:void(0)" class="btn-circle btn-circle-white animated zoomInUp animation-delay-10">
                <i class="zmdi zmdi-google"></i>
              </a>
              <a href="javascript:void(0)" class="btn-circle btn-circle-white animated zoomInUp animation-delay-11">
                <i class="zmdi zmdi-instagram"></i>
              </a>
              <a href="javascript:void(0)" class="btn-circle btn-circle-white animated zoomInUp animation-delay-12">
                <i class="zmdi zmdi-github"></i>
              </a>
              <br>
              <a href="javascript:void(0)" class="btn btn-white btn-lg color-primary btn-raised animated fadeInUp animation-delay-16">
                <i class="zmdi zmdi-download"></i> Download CV</a>
            </div>
            <div class="text-center mb-2">
              <a data-scroll href="#timeline" class="btn-circle btn-circle-raised btn-circle-white animated fadeInUp animation-delay-20">
                <i class="zmdi zmdi-long-arrow-down"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="container container-full pt-6">
        <div class="card card-block card-block-big wow fadeInUp" id="timeline">
          <h3 class="text-center fw-500 mb-6">Work Experiences</h3>
          <ul class="ms-timeline-left">
            <li class="ms-timeline-left-item wow fadeInUp">
              <h4>Google</h4>
              <div class="ms-timeline-left-left">
                <h4 class="color-primary">Senior Software Engineer</h4>
                <time class="ms-timeline-left-time">2015 - 2016</time>
              </div>
              <span class="ms-timeline-left-city">Mountain View</span>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                eu, pretium quis, sem. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
              <ul>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Maecenas tempus tellus eget</li>
                <li>Donec pede justo ante</li>
              </ul>
            </li>
            <li class="ms-timeline-left-item wow fadeInUp">
              <h4>Microsoft</h4>
              <div class="ms-timeline-left-left">
                <h4 class="color-primary">Web Developer</h4>
                <time class="ms-timeline-left-time">2015 - 2016</time>
              </div>
              <span class="ms-timeline-left-city">San Fransisco</span>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                eu, pretium quis, sem. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
            </li>
            <li class="ms-timeline-left-item wow fadeInUp">
              <h4>Twitter</h4>
              <div class="ms-timeline-left-left">
                <h4 class="color-primary">Senior Software Engineer</h4>
                <time class="ms-timeline-left-time">2015 - 2016</time>
              </div>
              <span class="ms-timeline-left-city">Madrid</span>
              <p>Cumque pariatur eos culpa, tempore eaque necessitatibus earum ut, aperiam, adipisci, laudantium tempora ipsa harum quae sapiente rerum doloribus voluptatum. Obcaecati iusto quibusdam nesciunt unde, suscipit! Dolorem error.</p>
              <p>Iure quae, voluptates laudantium. Eaque fugiat labore aliquam, explicabo, iste nam modi esse. Esse ea, perspiciatis alias non natus reprehenderit id omnis.</p>
            </li>
            <li class="ms-timeline-left-item wow fadeInUp">
              <h4>New York Times</h4>
              <div class="ms-timeline-left-left">
                <h4 class="color-primary">Software Engineer</h4>
                <time class="ms-timeline-left-time">2015 - 2016</time>
              </div>
              <span class="ms-timeline-left-city">New York</span>
              <p>Cumque pariatur eos culpa, tempore eaque necessitatibus earum ut, aperiam, adipisci, laudantium tempora ipsa harum quae sapiente rerum doloribus voluptatum. Obcaecati iusto quibusdam nesciunt unde, suscipit! Dolorem error, pariatur minima
                sint earum qui ea neque. Perspiciatis soluta, maxime dignissimos inpo on repudiandae sed vero amet nisi ut, dolores, placeat illo. Sunt molestiae.</p>
              <ul>
                <li>Delectus error quos expedita dignissimos quidem voluptatibus mollitia inventore aperiam laboriosam quisquam excepturi quasi quas, enim, similique voluptatum reprehenderit dicta quae dolores.</li>
                <li>Praesentium ullam, ratione ut dolor alias minima. Eius, corporis a, doloribus esse praesentium saepe quo delectus, quos, nobis sint repudiandae ratione.</li>
              </ul>
            </li>
            <li class="ms-timeline-left-item wow fadeInUp">
              <h4>AGM Studio</h4>
              <div class="ms-timeline-left-left">
                <h4 class="color-primary">Founder &amp; Lead Developer</h4>
                <time class="ms-timeline-left-time">2015 - 2016</time>
              </div>
              <span class="ms-timeline-left-city">London</span>
              <p>Cumque pariatur eos culpa, tempore eaque necessitatibus earum ut, aperiam, adipisci, laudantium tempora ipsa harum quae sapiente rerum doloribus voluptatum. Obcaecati iusto quibusdam nesciunt unde, suscipit! Dolorem error, pariatur minima
                sint earum qui ea neque. Perspiciatis soluta, maxime dignissimos inpo on repudiandae sed vero amet nisi ut, dolores, placeat illo. Sunt molestiae.</p>
            </li>
          </ul>
        </div>
        <div class="card mt-4 wow fadeInUp" id="education">
          <div class="card-block card-block-big">
            <h3 class="text-center fw-500 mb-2">Education</h3>
            <div class="row">
              <div class="col-lg-4">
                <div class="pr-1 pl-1">
                  <h4 class="color-primary fw-500 md-1">High school</h4>
                  <div class="color-info">Polytechnic University of Madrid</div>
                  <span class="small color-warning">2008 - 2011</span>
                  <p class="mt-1">Ducimus excepturi hic ipsum enim sit aspernatur asperiores expedita, officiis ad ratione incidunt necessitatibus fuga mollitia repellendus.</p>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="pl-1 pr-1">
                  <h4 class="color-primary fw-500 md-1">Software Engineering</h4>
                  <div class="color-info">Massachusetts Institute of Technology</div>
                  <span class="small color-warning">2011 - 2014</span>
                  <p class="mt-1">Provident soluta molestiae quam consectetur eveniet beatae ipsam nam, odit, quo voluptatum, voluptatem repellat magnam, molestias ducimus nihil quidem.</p>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="pl-1 pr-1">
                  <h4 class="color-primary fw-500 md-1">Systems Engineer</h4>
                  <div class="color-info">Harvard University</div>
                  <span class="small color-warning">2014 - 2016</span>
                  <p class="mt-1">Facilis laborum quo ipsum debitis quibusdam, repudiandae sunt asperiores, illo molestias quae consectetur necessitatibus fuga ipsum.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card card-primary-inverse mt-4 wow fadeInUp" id="skills">
          <div class="card-block card-block-big">
            <h3 class="text-center fw-500 mb-4">Professional Skills</h3>
            <h4 class="text-center">Top Skills</h4>
            <div class="row">
              <div class="col-lg-4">
                <div class="text-center mt-4">
                  <div class="circle" id="circles-1"></div>
                  <h4 class="text-center">Javascript</h4>
                  <p class="small-font">Lorem ipsum dolor sit amet consectetur adipisicing.</p>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="text-center mt-4">
                  <div class="circle" id="circles-2"></div>
                  <h4 class="text-center">Wordpress API</h4>
                  <p class="small-font">Lorem ipsum dolor sit amet consectetur adipisicing.</p>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="text-center mt-4">
                  <div class="circle" id="circles-3"></div>
                  <h4 class="text-center">Frontend Development</h4>
                  <p class="small-font">Lorem ipsum dolor sit amet consectetur adipisicing.</p>
                </div>
              </div>
            </div>
            <h4 class="text-center mt-6 mb-2">Other Skills</h4>
            <div class="text-center center-block mw-500">
              <span class="ms-tag ms-tag-light color-primary">HTML 5</span>
              <span class="ms-tag ms-tag-light color-primary">Bootstrap</span>
              <span class="ms-tag ms-tag-light color-primary">SASS</span>
              <span class="ms-tag ms-tag-light color-primary">LESS</span>
              <span class="ms-tag ms-tag-light color-primary">Jquery</span>
              <span class="ms-tag ms-tag-light color-primary">Angular JS</span>
              <span class="ms-tag ms-tag-light color-primary">React</span>
              <span class="ms-tag ms-tag-light color-primary">CSS 3</span>
              <span class="ms-tag ms-tag-light color-primary">Git</span>
              <span class="ms-tag ms-tag-light color-primary">Linux</span>
              <span class="ms-tag ms-tag-light color-primary">Ruby</span>
              <span class="ms-tag ms-tag-light color-primary">C/C++</span>
              <span class="ms-tag ms-tag-light color-primary">Python</span>
              <span class="ms-tag ms-tag-light color-primary">MVC</span>
              <span class="ms-tag ms-tag-light color-primary">C#</span>
              <span class="ms-tag ms-tag-light color-primary">Spanish</span>
              <span class="ms-tag ms-tag-light color-primary">PHP</span>
              <span class="ms-tag ms-tag-light color-primary">Symphony</span>
            </div>
          </div>
        </div>
        <div class="card mt-4 wow fadeInUp" id="portfolio">
          <div class="card-block card-block-big">
            <h3 class="text-center fw-500 mb-4">Portfolio</h3>
            <div class="mw-800 center-block mb-4">
              <ul class="nav nav-tabs nav-tabs-transparent indicator-primary nav-tabs-full nav-tabs-4" role="tablist">
                <li role="presentation" class="nav-item">
                  <a class="nav-link filter active withoutripple" href="#home7" aria-controls="home7" role="tab" data-toggle="tab" data-filter="all">
                    <i class="zmdi zmdi-desktop-mac"></i>
                    <span class="d-none d-md-inline">All</span>
                  </a>
                </li>
                <li role="presentation" class="nav-item">
                  <a class="nav-link filter withoutripple" href="#profile7" aria-controls="profile7" role="tab" data-toggle="tab" data-filter=".category-1">
                    <i class="zmdi zmdi-language-html5"></i>
                    <span class="d-none d-md-inline">HTML</span>
                  </a>
                </li>
                <li role="presentation" class="nav-item">
                  <a class="nav-link filter withoutripple" href="#messages7" aria-controls="messages7" role="tab" data-toggle="tab" data-filter=".category-2">
                    <i class="fa fa-wordpress"></i>
                    <span class="d-none d-md-inline">Wordpress</span>
                  </a>
                </li>
                <li role="presentation" class="nav-item">
                  <a class="nav-link filter withoutripple" href="#settings7" aria-controls="settings7" role="tab" data-toggle="tab" data-filter=".category-3">
                    <i class="zmdi zmdi-language-javascript"></i>
                    <span class="d-none d-md-inline">Angular JS</span>
                  </a>
                </li>
              </ul>
            </div>
            <div class="row" id="Container">
              <div class="col-lg-4 col-sm-6 mix category-1 category-3">
                <div class="card">
                  <figure class="ms-thumbnail">
                    <img src="assets/img/demo/port1.jpg" alt="" class="img-fluid">
                    <figcaption class="ms-thumbnail-caption text-center">
                      <div class="ms-thumbnail-caption-content">
                        <h4 class="ms-thumbnail-caption-title mb-2">Lorem ipsum dolor</h4>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs mr-1 btn-circle-white color-danger">
                          <i class="zmdi zmdi-favorite"></i>
                        </a>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs ml-1 mr-1 btn-circle-white color-warning">
                          <i class="zmdi zmdi-star"></i>
                        </a>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs ml-1 btn-circle-white color-success">
                          <i class="zmdi zmdi-share"></i>
                        </a>
                      </div>
                    </figcaption>
                  </figure>
                </div>
              </div>
              <!-- item -->
              <div class="col-lg-4 col-sm-6 mix category-2">
                <div class="card">
                  <figure class="ms-thumbnail">
                    <img src="assets/img/demo/port2.jpg" alt="" class="img-fluid">
                    <figcaption class="ms-thumbnail-caption text-center">
                      <div class="ms-thumbnail-caption-content">
                        <h4 class="ms-thumbnail-caption-title mb-2">Lorem ipsum dolor</h4>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs mr-1 btn-circle-white color-danger">
                          <i class="zmdi zmdi-favorite"></i>
                        </a>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs ml-1 mr-1 btn-circle-white color-warning">
                          <i class="zmdi zmdi-star"></i>
                        </a>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs ml-1 btn-circle-white color-success">
                          <i class="zmdi zmdi-share"></i>
                        </a>
                      </div>
                    </figcaption>
                  </figure>
                </div>
              </div>
              <!-- item -->
              <div class="col-lg-4 col-sm-6 mix category-3">
                <div class="card">
                  <figure class="ms-thumbnail">
                    <img src="assets/img/demo/port3.jpg" alt="" class="img-fluid">
                    <figcaption class="ms-thumbnail-caption text-center">
                      <div class="ms-thumbnail-caption-content">
                        <h4 class="ms-thumbnail-caption-title mb-2">Lorem ipsum dolor</h4>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs mr-1 btn-circle-white color-danger">
                          <i class="zmdi zmdi-favorite"></i>
                        </a>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs ml-1 mr-1 btn-circle-white color-warning">
                          <i class="zmdi zmdi-star"></i>
                        </a>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs ml-1 btn-circle-white color-success">
                          <i class="zmdi zmdi-share"></i>
                        </a>
                      </div>
                    </figcaption>
                  </figure>
                </div>
              </div>
              <!-- item -->
              <div class="col-lg-4 col-sm-6 mix category-2">
                <div class="card">
                  <figure class="ms-thumbnail">
                    <img src="assets/img/demo/port4.jpg" alt="" class="img-fluid">
                    <figcaption class="ms-thumbnail-caption text-center">
                      <div class="ms-thumbnail-caption-content">
                        <h4 class="ms-thumbnail-caption-title mb-2">Lorem ipsum dolor</h4>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs mr-1 btn-circle-white color-danger">
                          <i class="zmdi zmdi-favorite"></i>
                        </a>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs ml-1 mr-1 btn-circle-white color-warning">
                          <i class="zmdi zmdi-star"></i>
                        </a>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs ml-1 btn-circle-white color-success">
                          <i class="zmdi zmdi-share"></i>
                        </a>
                      </div>
                    </figcaption>
                  </figure>
                </div>
              </div>
              <!-- item -->
              <div class="col-lg-4 col-sm-6 mix category-1">
                <div class="card">
                  <figure class="ms-thumbnail">
                    <img src="assets/img/demo/port5.jpg" alt="" class="img-fluid">
                    <figcaption class="ms-thumbnail-caption text-center">
                      <div class="ms-thumbnail-caption-content">
                        <h4 class="ms-thumbnail-caption-title mb-2">Lorem ipsum dolor</h4>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs mr-1 btn-circle-white color-danger">
                          <i class="zmdi zmdi-favorite"></i>
                        </a>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs ml-1 mr-1 btn-circle-white color-warning">
                          <i class="zmdi zmdi-star"></i>
                        </a>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs ml-1 btn-circle-white color-success">
                          <i class="zmdi zmdi-share"></i>
                        </a>
                      </div>
                    </figcaption>
                  </figure>
                </div>
              </div>
              <!-- item -->
              <div class="col-lg-4 col-sm-6 mix category-3">
                <div class="card">
                  <figure class="ms-thumbnail">
                    <img src="assets/img/demo/port6.jpg" alt="" class="img-fluid">
                    <figcaption class="ms-thumbnail-caption text-center">
                      <div class="ms-thumbnail-caption-content">
                        <h4 class="ms-thumbnail-caption-title mb-2">Lorem ipsum dolor</h4>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs mr-1 btn-circle-white color-danger">
                          <i class="zmdi zmdi-favorite"></i>
                        </a>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs ml-1 mr-1 btn-circle-white color-warning">
                          <i class="zmdi zmdi-star"></i>
                        </a>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs ml-1 btn-circle-white color-success">
                          <i class="zmdi zmdi-share"></i>
                        </a>
                      </div>
                    </figcaption>
                  </figure>
                </div>
              </div>
              <!-- item -->
              <div class="col-lg-4 col-sm-6 mix category-2">
                <div class="card">
                  <figure class="ms-thumbnail">
                    <img src="assets/img/demo/port7.jpg" alt="" class="img-fluid">
                    <figcaption class="ms-thumbnail-caption text-center">
                      <div class="ms-thumbnail-caption-content">
                        <h4 class="ms-thumbnail-caption-title mb-2">Lorem ipsum dolor</h4>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs mr-1 btn-circle-white color-danger">
                          <i class="zmdi zmdi-favorite"></i>
                        </a>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs ml-1 mr-1 btn-circle-white color-warning">
                          <i class="zmdi zmdi-star"></i>
                        </a>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs ml-1 btn-circle-white color-success">
                          <i class="zmdi zmdi-share"></i>
                        </a>
                      </div>
                    </figcaption>
                  </figure>
                </div>
              </div>
              <!-- item -->
              <div class="col-lg-4 col-sm-6 mix category-1">
                <div class="card">
                  <figure class="ms-thumbnail">
                    <img src="assets/img/demo/port8.jpg" alt="" class="img-fluid">
                    <figcaption class="ms-thumbnail-caption text-center">
                      <div class="ms-thumbnail-caption-content">
                        <h4 class="ms-thumbnail-caption-title mb-2">Lorem ipsum dolor</h4>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs mr-1 btn-circle-white color-danger">
                          <i class="zmdi zmdi-favorite"></i>
                        </a>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs ml-1 mr-1 btn-circle-white color-warning">
                          <i class="zmdi zmdi-star"></i>
                        </a>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs ml-1 btn-circle-white color-success">
                          <i class="zmdi zmdi-share"></i>
                        </a>
                      </div>
                    </figcaption>
                  </figure>
                </div>
              </div>
              <!-- item -->
              <div class="col-lg-4 col-sm-6 mix category-3">
                <div class="card">
                  <figure class="ms-thumbnail">
                    <img src="assets/img/demo/port9.jpg" alt="" class="img-fluid">
                    <figcaption class="ms-thumbnail-caption text-center">
                      <div class="ms-thumbnail-caption-content">
                        <h4 class="ms-thumbnail-caption-title mb-2">Lorem ipsum dolor</h4>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs mr-1 btn-circle-white color-danger">
                          <i class="zmdi zmdi-favorite"></i>
                        </a>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs ml-1 mr-1 btn-circle-white color-warning">
                          <i class="zmdi zmdi-star"></i>
                        </a>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs ml-1 btn-circle-white color-success">
                          <i class="zmdi zmdi-share"></i>
                        </a>
                      </div>
                    </figcaption>
                  </figure>
                </div>
              </div>
              <!-- item -->
              <div class="col-lg-4 col-sm-6 mix category-2">
                <div class="card">
                  <figure class="ms-thumbnail">
                    <img src="assets/img/demo/port10.jpg" alt="" class="img-fluid">
                    <figcaption class="ms-thumbnail-caption text-center">
                      <div class="ms-thumbnail-caption-content">
                        <h4 class="ms-thumbnail-caption-title mb-2">Lorem ipsum dolor</h4>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs mr-1 btn-circle-white color-danger">
                          <i class="zmdi zmdi-favorite"></i>
                        </a>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs ml-1 mr-1 btn-circle-white color-warning">
                          <i class="zmdi zmdi-star"></i>
                        </a>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs ml-1 btn-circle-white color-success">
                          <i class="zmdi zmdi-share"></i>
                        </a>
                      </div>
                    </figcaption>
                  </figure>
                </div>
              </div>
              <!-- item -->
              <div class="col-lg-4 col-sm-6 mix category-1">
                <div class="card">
                  <figure class="ms-thumbnail">
                    <img src="assets/img/demo/port11.jpg" alt="" class="img-fluid">
                    <figcaption class="ms-thumbnail-caption text-center">
                      <div class="ms-thumbnail-caption-content">
                        <h4 class="ms-thumbnail-caption-title mb-2">Lorem ipsum dolor</h4>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs mr-1 btn-circle-white color-danger">
                          <i class="zmdi zmdi-favorite"></i>
                        </a>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs ml-1 mr-1 btn-circle-white color-warning">
                          <i class="zmdi zmdi-star"></i>
                        </a>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs ml-1 btn-circle-white color-success">
                          <i class="zmdi zmdi-share"></i>
                        </a>
                      </div>
                    </figcaption>
                  </figure>
                </div>
              </div>
              <!-- item -->
              <div class="col-lg-4 col-sm-6 mix category-2">
                <div class="card">
                  <figure class="ms-thumbnail">
                    <img src="assets/img/demo/port12.jpg" alt="" class="img-fluid">
                    <figcaption class="ms-thumbnail-caption text-center">
                      <div class="ms-thumbnail-caption-content">
                        <h4 class="ms-thumbnail-caption-title mb-2">Lorem ipsum dolor</h4>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs mr-1 btn-circle-white color-danger">
                          <i class="zmdi zmdi-favorite"></i>
                        </a>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs ml-1 mr-1 btn-circle-white color-warning">
                          <i class="zmdi zmdi-star"></i>
                        </a>
                        <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-xs ml-1 btn-circle-white color-success">
                          <i class="zmdi zmdi-share"></i>
                        </a>
                      </div>
                    </figcaption>
                  </figure>
                </div>
              </div>
              <!-- item -->
            </div>
          </div>
        </div>
        <div class="card mt-4 wow fadeInUp" id="testimonials">
          <div class="card-block card-block-big">
            <h3 class="text-center fw-500 mb-4">Testimonials</h3>
            <div class="mw-800 center-block">
              <div id="carousel-example-generic" class="carousel-cards carousel slide" data-ride="carousel">
                <div class="carousel-inner" role="listbox">
                  <div class="carousel-item active">
                    <blockquote class="blockquote ms-blockquote">
                      <p class="lead">Voluptatibus fugit distinctio, corporis accusantium excepturi eos voluptates explicabo saepe. Nesciunt illo incidunt esse provident eos eligendi blanditiis voluptatum inventore quod id.</p>
                      <footer>
                        <strong>Alan Grants</strong>,
                        <cite title="Source Title">Twitter Inc.</cite>
                      </footer>
                    </blockquote>
                  </div>
                  <div class="carousel-item">
                    <blockquote class="blockquote ms-blockquote">
                      <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia quis recusandae sit qui porro nihil quo ex non modi quisquam illum veniam, reprehenderit asperiores dolores, perferendis nulla officiis enim.</p>
                      <footer>
                        <strong>Anthony Hook</strong>,
                        <cite title="Source Title">Microsoft Inc.</cite>
                      </footer>
                    </blockquote>
                  </div>
                  <div class="carousel-item">
                    <blockquote class="blockquote ms-blockquote">
                      <p class="lead">Quis sapiente dolore, voluptates magnam explicabo qui quas dicta molestiae dolorum molestias, necessitatibus repellat. Eum molestiae excepturi sunt veniam maiores sed rerum, reprehenderit, nostrum voluptatem, ea, quo..</p>
                      <footer>
                        <strong>Alan Grants</strong>,
                        <cite title="Source Title">Twitter Inc.</cite>
                      </footer>
                    </blockquote>
                  </div>
                </div>
                <ol class="carousel-indicators carousel-indicators-primary">
                  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                </ol>
              </div>
            </div>
          </div>
        </div>
        <div class="card mt-4 wow fadeInUp" id="information">
          <div class="bg-primary">
            <h3 class="color-white index-1 fw-500 text-center no-m pt-4">Information</h3>
            <img src="assets/img/demo/avatar1.jpg" alt="..." class="img-avatar-circle"> </div>
          <div class="card-block card-block-big">
            <div class="row">
              <div class="col-lg-6">
                <h3 class="color-primary">About me</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae nemo ratione labore debitis, incidunt repellendus sapiente iste atque est. A architecto placeat nesciunt, ad quae saepe quas quisquam, iste, aliquid harum hic dolorum
                  delectus fugiat, iure sint est esse at?</p>
                <p>Nemo, unde. Iusto nihil amet laboriosam debitis magni cumque explicabo pariatur voluptate molestiae, cupiditate est, deleniti aperiam quisquam ratione quaerat harum eligendi earum, tempora non itaque. Fugiat ipsam perspiciatis voluptatibus
                  quod ratione quas odio nobis aspernatur unde. Consequuntur, nisi, odit.</p>
              </div>
              <div class="col-lg-5 ml-lg-auto">
                <h3 class="color-primary">Contact</h3>
                <address class="no-mb">
                  <p>
                    <i class="color-danger zmdi zmdi-pin mr-1"></i>
                    <strong>Adress:</strong> 795 Folsom Ave, Suite 600</p>
                  <p>
                    <i class="color-warning zmdi zmdi-map mr-1"></i>
                    <strong>City:</strong> San Francisco, CA 94107</p>
                  <p>
                    <i class="color-info zmdi zmdi-email mr-1"></i>
                    <strong>Email:</strong>
                    <a href="mailto:joe@example.com">example@domain.com</a>
                  </p>
                  <p>
                    <i class="color-royal zmdi zmdi-phone mr-1"></i>
                    <strong>Phone:</strong> +34 123 456 7890 </p>
                  <p>
                    <i class="color-success fa fa-fax mr-1"></i>
                    <strong>Fax:</strong> +34 123 456 7890 </p>
                </address>
                <div class="mt-4">
                  <a href="javascript:void(0)" class="btn-circle btn-facebook">
                    <i class="zmdi zmdi-facebook"></i>
                  </a>
                  <a href="javascript:void(0)" class="btn-circle btn-twitter">
                    <i class="zmdi zmdi-twitter"></i>
                  </a>
                  <a href="javascript:void(0)" class="btn-circle btn-google">
                    <i class="zmdi zmdi-google"></i>
                  </a>
                  <a href="javascript:void(0)" class="btn-circle btn-instagram">
                    <i class="zmdi zmdi-instagram"></i>
                  </a>
                  <a href="javascript:void(0)" class="btn-circle btn-github">
                    <i class="zmdi zmdi-github"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- container -->
      <div class="btn-back-top">
        <a href="#" data-scroll id="back-top" class="btn-circle btn-circle-primary btn-circle-sm btn-circle-raised ">
          <i class="zmdi zmdi-long-arrow-up"></i>
        </a>
      </div>
      <div class="bg-light index-1 intro-full-next pt-6">
        <footer class="ms-footer">
          <div class="container">
            <p>Copyright &copy; Material Style 2017</p>
          </div>
        </footer>
        <div class="btn-back-top">
          <a href="#" data-scroll id="back-top" class="btn-circle btn-circle-primary btn-circle-sm btn-circle-raised ">
            <i class="zmdi zmdi-long-arrow-up"></i>
          </a>
        </div>
      </div>
    </div>
    <!-- ms-site-container -->
    <div class="ms-slidebar sb-slidebar sb-left sb-momentum-scrolling sb-style-overlay">
      <header class="ms-slidebar-header">
        <div class="ms-slidebar-login">
          <a href="javascript:void(0)" class="withripple">
            <i class="zmdi zmdi-account"></i> Login</a>
          <a href="javascript:void(0)" class="withripple">
            <i class="zmdi zmdi-account-add"></i> Register</a>
        </div>
        <div class="ms-slidebar-title">
          <form class="search-form">
            <input id="search-box-slidebar" type="text" class="search-input" placeholder="Search..." name="q" />
            <label for="search-box-slidebar">
              <i class="zmdi zmdi-search"></i>
            </label>
          </form>
          <div class="ms-slidebar-t">
            <span class="ms-logo ms-logo-sm">M</span>
            <h3>Material
              <span>Style</span>
            </h3>
          </div>
        </div>
      </header>
      <ul class="ms-slidebar-menu" id="slidebar-menu" role="tablist" aria-multiselectable="true">
        <li>
          <a data-scroll class="link" href="#home">
            <i class="zmdi zmdi-home"></i> Home</a>
        </li>
        <li>
          <a data-scroll class="link" href="#timeline">
            <i class="zmdi zmdi-time"></i> Timeline</a>
        </li>
        <li>
          <a data-scroll class="link" href="#education">
            <i class="zmdi zmdi-graduation-cap"></i> Education</a>
        </li>
        <li>
          <a data-scroll class="link" href="#skills">
            <i class="zmdi zmdi-case-check"></i> Skills</a>
        </li>
        <li>
          <a data-scroll class="link" href="#portfolio">
            <i class="zmdi zmdi-desktop-mac"></i> Portfolio</a>
        </li>
        <li>
          <a data-scroll class="link" href="#testimonials">
            <i class="zmdi zmdi-quote"></i> Testimonials</a>
        </li>
        <li>
          <a data-scroll class="link" href="#information">
            <i class="zmdi zmdi-account"></i> Information</a>
        </li>
        <li>
          <a data-scroll class="link" href="index.html">
            <i class="zmdi zmdi-swap"></i> Main Site</a>
        </li>
      </ul>
      <div class="ms-slidebar-social ms-slidebar-block">
        <h4 class="ms-slidebar-block-title">Social Links</h4>
        <div class="ms-slidebar-social">
          <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-sm btn-facebook">
            <i class="zmdi zmdi-facebook"></i>
            <span class="badge-pill badge-pill-pink">12</span>
          </a>
          <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-sm btn-twitter">
            <i class="zmdi zmdi-twitter"></i>
            <span class="badge-pill badge-pill-pink">4</span>
          </a>
          <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-sm btn-youtube">
            <i class="zmdi zmdi-youtube"></i>
          </a>
          <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-sm btn-instagram">
            <i class="zmdi zmdi-instagram"></i>
          </a>
        </div>
      </div>
    </div>
    <script src="assets/js/plugins.min.js"></script>
    <script src="assets/js/app.min.js"></script>
    <script src="assets/js/configurator.min.js"></script>
    <script>
      (function(i, s, o, g, r, a, m)
      {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function()
        {
          (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date();
        a = s.createElement(o),
          m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
      })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
      ga('create', 'UA-90917746-2', 'auto');
      ga('send', 'pageview');
    </script>
    <script src="assets/js/lead-cv-full.js"></script>
  </body>
</html>